<template>
  <div class="content">
    <div class="goods">
      <div class="goods-item" v-for="(item,index) in datalist" :key="index" @click="goDetail(item,index)">
        <img class="img" :src="item.goods_img" alt="" />
        <div class="info">
          <div class="phoneName">{{ item.goods_name }}</div>
          <div class="advantage">{{ item.goods_info }}</div>
          <div class="price">
            <div class="pprice">{{ item.goods_pprice }}</div>
            <div class="oprice">{{ item.goods_oprice }}</div>
          </div>
        </div>
      </div>
      <div class="goods_more" @click="viewMore" v-if="pageType == 'home' && datalist">
        <div class="goods_more_item">
          浏览更多
          <i class="iconfont icon-youshuangjiantou"></i> 
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapMutations } from 'vuex';
export default {
  props:{
    datalist:Array,
    goodsType:String,
    pageType:String
  },
  data(){
    return{
    }
  },
  methods: {
    ...mapMutations(['initGoods']),
    goDetail(item,index){
      sessionStorage.setItem('productID',item.id)
      this.$router.push({name:'details'})
    },
    viewMore(){
      if(this.goodsType == 'phone'){
        this.$router.push({name:'goods',params:{type:'goodsItem',index:1}})
      }else if(this.goodsType == 'houseUtensil'){
        this.$router.push({name:'goods',params:{type:'goodsItem',index:2}})
      }else if(this.goodsType == 'Accessory'){
        this.$router.push({name:'goods',params:{type:'goodsItem',index:6}})
      }
    }
  },
};
</script>

<style scoped>
.content {
  background-color: #f5f5f5;
}
.goods {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  background-color: #f5f5f5;
}
.goods-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 300px;
  flex: 0 0 19%;
  margin-top: 10px;
  background-color: #ffffff;
  cursor: pointer;
  margin-right: 14px;
}
.goods-item:nth-child(5n){
  margin-right: 0px;
}
.goods-item:hover{
  box-shadow: 6px 6px 5px #ccc;
}
.price {
  display: flex;
  width: 120px;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.advantage {
  font-size: 12px;
  color: #ccc;
  margin-top: 8px;
}
.img {
  width: 160px;
  margin-top: 10px;
}
.info{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}
.pprice{
  color: red;
}
.oprice {
  color: #ccc;
  text-decoration: line-through;
}
.goods_more{
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 19%;
  height: 300px;
  margin-top: 10px;
  background-color: #ffffff;
  cursor: pointer;
}
.goods_more:hover{
  box-shadow: 6px 6px 5px #ccc;
}
.goods_more_item:hover{
  color: #ff6700;
}
</style>